<template>
  <div class="introduce_page">
    <div v-show="flag">
      <div class="head">
        <div @click="$router.go(-1)" class="iconfont icon-zuojiantou"></div>
        <div
          class="iconfont icon-jia"
          @click="addBookRackFun(bookId, bookTitle, cover, author)"
        ></div>
      </div>
      <div class="content">
        <div class="top">
          <div class="img">
            <img :src="cover" alt="" />
          </div>
          <div class="right">
            <div class="title">{{ entry.title }}</div>
            <div class="author">{{ category }} | {{ author }}</div>
            <div class="star">
              <van-rate v-model="starNum" readonly color="#ffd21e" />
            </div>
            <div class="num">105.4万字</div>
            <div class="count">{{ countNum }}点击</div>
          </div>
        </div>
        <div class="bottom">
          {{ contentText }}
        </div>
        <div class="section" @click="goReadBook(bookId, content_uuid)">
          <span class="iconfont icon-santiaoxian"></span>
          <span class="time">{{ updateM }}月{{ updateD }}日</span>
          <span>更新:</span>
          <span>{{ this.latestArticleTitle }}</span>
        </div>
      </div>

      <div class="review" v-if="remark">
        <div class="top">
          <div class="text">评论</div>
          <div class="write" @click="showPopup">
            <span class="iconfont icon-xiepinglun"></span> 写评论
          </div>
        </div>
        <div class="user" v-for="(item, index) in remark" :key="index">
          <div class="img">
            <img :src="item.avatar" alt="" />
          </div>
          <div class="info">
            <div class="user_name">
              {{ item.nickName }}
              <span class="level">lv.{{ item.userLevel }}</span>
            </div>
            <div class="like">
              <span class="star" v-show="item.grade"
                ><van-rate
                  v-model="item.grade"
                  readonly
                  color="#ffd21e"
                  :size="16"
              /></span>
              <span class="time">{{ changeTime(item.time) }}</span>
            </div>
            <div class="review_content">
              {{ item.comment }}
            </div>
          </div>
          <div class="good">
            <span class="num">{{ item.likes }}</span
            ><span
              :class="[
                'iconfont',
                'icon-dianzan',
                { changePraise: item.isPraise },
              ]"
              @click="praiseFun(item)"
            ></span>
          </div>
        </div>

        <router-link tag="div" to="/review" class="all">
          查看全部评论</router-link
        >
      </div>

      <van-popup v-model="show" position="bottom" :style="{ height: '25%' }">
        <div class="ipt_box">
          评分:<van-rate
            v-model="value"
            :size="20"
            color="#ffd21e"
            void-icon="star"
            void-color="#f6f6f6"
          />

          <van-field
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
          />

          <div class="btn" @click="reviewFun">发送</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  getBookGetsub,
  getBookInfo,
  getBookSpimpleInfo,
  getReaderBookInfo,
  getCommentGetComments,
} from "../api/base";
export default {
  name: "introduce",
  data() {
    return {
      show: false,
      value: 3,
      message: "",
      bookId: "", //书籍id
      bookTitle: "", //书籍名称
      entry: "",
      category: "", //类型
      starNum: 0, //星星数量
      countNum: "", // 点击数量
      wordNum: "", // 字数
      contentText: "", // content
      cover: "", // 封面
      author: "", //作者
      updateM: null, //最新更新时间 月
      updateD: null, //最新更新时间 日
      latestArticleTitle: "", // 最新章节
      content_uuid: "", //第一章id
      remark: null, // 评论列表
      flag: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },

    changeTime(time) {
      return new Date(time).toLocaleDateString();
    },

    // 书的详情
    getBookGetsubFun() {
      this.$toast.loading({
        message: "加载中...",
        overlay: true,
      });

      getBookGetsub({ id: this.bookId, title: this.bookTitle }).then((data) => {
        this.entry = data.feed.entry;

        // 类型
        this.category = data.feed.entry["pris:book"].category;

        // 星星数量
        this.starNum = parseInt(data.feed.entry["pris:ranking"].value);

        // 点击数量
        this.countNum = data.feed.entry["pris:subscribe"].clicksCount;
        // 字数
        this.wordNum = data.feed.entry["pris:book"].words;

        // content
        this.contentText = data.feed.entry.content.text;
        // entry.author.name
        this.author = data.feed.entry.author.name;

        // 最新更新时间

        this.updateM = data.feed.entry.updated.slice(5, 7);
        this.updateD = data.feed.entry.updated.slice(8, 10);

        if (data) {
          console.log(111);
          this.$toast.clear();
          this.flag = true;
        }
      });
    },
    // 书籍信息 获取图片
    getBookInfoFun() {
      getBookInfo({ sourceUuid: this.bookId }).then((data) => {
        console.log(data);
        this.cover = data.data.book.cover;
      });
    },
    // 书最新章节
    getBookSpimpleInfoFun() {
      getBookSpimpleInfo({ id: this.bookId }).then((data) => {
        console.log(data);
        this.latestArticleTitle = data.item.latestArticleTitle;
        console.log(this.latestArticleTitle);
      });
    },
    // 章节列表
    getReaderBookInfoFun() {
      getReaderBookInfo({ source_uuid: this.bookId }).then((data) => {
        console.log(data.data.catalog[1]);
        // 拿到第一章id
        this.content_uuid = data.data.catalog[1].uuid;
        console.log(this.content_uuid);
      });
    },
    // 跳到阅读书籍页面
    goReadBook() {
      // this.$router.push({name:"details",params:{bookId,content_uuid}});
      this.$router.push({ name: "details" });
      // console.log(content_uuid);
      // 调用vuex存储状态
      // this.$store.commit("setBookDetails",{bookId,content_uuid})
    },

    // 获取书籍评论
    getCommentGetCommentsFun() {
      getCommentGetComments({ bookId: this.bookId }).then((data) => {
        console.log(data.all.list);
        this.remark = data.all.list.slice(0, 3);
      });
    },

    // 点赞
    praiseFun(item) {
      console.log("点赞了");
      console.log(item);
      item.isPraise = item.isPraise == 0 ? 1 : 0;
      item.likes = item.isPraise == 1 ? item.likes + 1 : item.likes - 1;
    },

    // 评论
    reviewFun() {
      let content = {};
      content.comment = this.message;
      content.isPraise = 0;
      content.grade = this.value;
      content.likes = 0;
      content.nickName = "某某某";
      content.userLevel = "3";
      content.time = new Date();
      content.avatar =
        "https://easyreadfs.nosdn.127.net/iH79DDlOYdpauF6o7ys8rw==/8796093024727271599";
      this.$set(this.remark, 0, content);
      this.show = false;
      this.message = "";
    },

    // 添加书籍
    addBookRackFun(id, title, cover, author) {
      console.log(111);
      // 调用vuex存储状态
      this.$store.commit("setBookRackInfo", { id, title, cover, author });
      this.$toast("已添加")
    },
  },
  created() {
    // console.log(this.$route.params);
    // this.bookId = this.$route.params.id;
    // this.bookTitle = this.$route.params.title;
    let info = this.$store.state.bookInfo;
    console.log(this.$store.state.bookInfo);
    this.bookId = info.id;
    this.bookTitle = info.title;

    this.getBookGetsubFun();
    this.getBookInfoFun();
    this.getBookSpimpleInfoFun();
    this.getReaderBookInfoFun();

    this.getCommentGetCommentsFun();

    console.log("测试会触发吗111");
  },
  activated() {
    let info = this.$store.state.bookInfo;
    console.log(this.$store.state.bookInfo);

    let isId = info.id;

    // console.log(this.$route.params);
    // this.bookId = this.$route.params.id;
    // this.bookTitle = this.$route.params.title;

    if (isId != this.bookId) {
      this.bookId = info.id;
      this.bookTitle = info.title;
      this.getBookGetsubFun();
      this.getBookInfoFun();
      this.getBookSpimpleInfoFun();
      this.getReaderBookInfoFun();

      this.getCommentGetCommentsFun();
      console.log("测试会触发吗222");
    }
  },
};
</script>

<style lang="less">
.introduce_page {
  width: 100%;
  height: 100vh;
  background-color: #f6f6f6;
  .head {
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    div {
      font-size: 18px;
      line-height: 18px;
    }
  }
  .content {
    padding: 0 10px;
    padding-top: 5px;
    margin-bottom: 12px;
    .top {
      display: flex;
      margin-bottom: 10px;
      .img {
        margin-right: 10px;
        img {
          width: 92px;
          height: 136px;
        }
      }
      .right {
        .title {
          font-weight: bold;
          margin-bottom: 8px;
        }
        .author {
          font-size: 14px;
          //   margin-bottom: 3px;
        }
        .num {
          font-size: 14px;
          //   margin-bottom: 4px;
        }
        .count {
          font-size: 14px;
        }
      }
    }
    .bottom {
      font-size: 15px;
      margin-bottom: 10px;
      color: #696969;
    }
    .section {
      width: 355px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding: 8px 0;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      span {
        margin-right: 5px;
        font-size: 14px;
      }
      .icon-santiaoxian {
        font-size: 16px;
        margin-right: 12px;
      }
    }
  }
  .review {
    padding: 0 12px;
    box-sizing: border-box;
    background-color: #f6f6f6;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .text {
        font-size: 18px;
      }
      .write {
        border: 1px solid #ddd;
        padding: 4px;
        border-radius: 8px;
        font-size: 15px;
      }
    }
    .user {
      margin-bottom: 30px;
      display: flex;
      position: relative;
      .img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
      }
      .info {
        .user_name {
          margin-bottom: 5px;
          .level {
            border: 1px solid #ddd;
            font-size: 13px;
            margin-left: 4px;
            padding: 0 3px;
            border-radius: 3px;
          }
        }
        .like {
          margin-bottom: 8px;
          .star {
            margin-right: 10px;
          }
          .time {
            font-size: 14px;
          }
        }
        .review_content {
          font-size: 15px;
          color: #646464;
          line-height: 15px;
          letter-spacing: 1px;
        }
      }
      .good {
        position: absolute;
        right: 0;
        top: 0;
        .num {
          margin-right: 4px;
          font-size: 14px;
        }
        .changePraise {
          color: red;
        }
      }
    }
    .all {
      width: 90px;
      padding: 8px 12px;
      margin: 0 auto;
      border: 1px solid #ddd;
      font-size: 15px;
    }
  }
  .van-popup {
    padding: 0 10px;
    padding-top: 10px;
    box-sizing: border-box;
    .ipt_box {
      position: relative;
      .van-rate {
        margin-left: 5px;
        margin-bottom: 8px;
      }
      .van-field__word-limit {
        text-align: left;
      }
      .btn {
        position: absolute;
        right: 0;
        bottom: -15px;
        width: 50px;
        text-align: center;
        background-color: red;
        color: white;
        font-size: 15px;
        border-radius: 3px;
        padding: 4px 6px;
      }
    }
  }
}
</style>